<template>
   <el-container>
    <el-header>电商后台管理
        <span class="username">admin</span>
        <el-button class="exit" size="medium" @click="exit">退出</el-button>
    </el-header>
    <!--侧边栏-->
    <el-container>
        <el-aside width="200px">
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" >
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-user-solid"></i>
                      <span>用户管理</span>
                </template>
                    <router-link index="1-1" tag="el-menu-item" to="/userlist">
                      <i class="el-icon-menu"></i>
                       <span>用户列表</span>
                    </router-link>
                </el-submenu>
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-star-on"></i>
                    <span>权限管理</span>
                  </template>
                  <router-link tag="el-menu-item" index="2-1" to="/rolelist">
                      <i class="el-icon-menu"></i>
                      <span>角色列表</span>
                  </router-link>
                    <router-link tag="el-menu-item" index="2-2" to="/powerlist">
                      <i class="el-icon-menu"></i>
                    <span>权限列表</span>
                  </router-link>
              </el-submenu>
                  <el-submenu index="3">
                    <template slot="title">
                      <i class="el-icon-s-goods"></i>
                      <span>商品管理</span>
                    </template>
                    <router-link tag="el-menu-item" index="3-1" to="/goodsList"><i class="el-icon-menu"></i>商品列表</router-link>
                    <router-link tag="el-menu-item" index="3-2" to="/paramsClass"><i class="el-icon-menu" ></i>分类参数</router-link>
                    <router-link tag="el-menu-item" index="3-3"  to="/goodsClass"><i class="el-icon-menu"></i>商品分类</router-link>
              </el-submenu>
                <el-submenu index="4">
                  <template slot="title">
                    <i class="el-icon-s-order"></i>
                    <span>订单管理</span>
                  </template>
                    <router-link tag="el-menu-item" index="4-1" to="/orderList"><i class="el-icon-menu" ></i>订单列表</router-link>
                  </el-submenu>
                <el-submenu index="5">
                  <template slot="title">
                    <i class="el-icon-s-marketing"></i>
                      <span>数据统计</span>
                        </template>
                     <router-link tag="el-menu-item" index="5-1" to="/data"><i class="el-icon-menu" ></i>数据列表</router-link>
                </el-submenu>
          </el-menu>
  </el-aside>
    <!--中间主要内容区域-->
    <el-main>
        <!--面包屑导航-->
        <bread-header></bread-header>
        <!--展示组件-->
        <div class="component">
            <router-view></router-view>
        </div>
    </el-main>
    </el-container>
</el-container>
</template>

<script>
import breadHeader from "../main/breadHeader"
export default {
     methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      exit(){
        this.$router.push("/login")
      }
    },
    components:{
        breadHeader
    },
    created(){
        this.$store.commit("changeTitle",{"t1":"用户管理","t2":"用户列表"})
    }
}
</script>

<style lang="scss">
    .el-container{
      height: 100%;
        .el-breadcrumb{
            height: 56px;
        }
        .el-header{
            padding: 0;
           text-align: center;
           background: #5bc0bf;
           line-height: 60px;
           color: #fff;
           font-size: 22px;
           font-weight: 500;
        .username{
            position: absolute;
            left: 20px;
            color: #fff;
            font-size: 16px;
            font-weight: normal
        }
        .exit{
            position: absolute;
            right: 20px;
            top:12px
        }
        }
        .el-aside{
            background: #efefef;
            height: 100%;
            .el-menu {
                background-color: #efefef !important
              }
          }
        .el-main{
            padding: 0;
            .el-breadcrumb{
                  background: #efefef;
                  line-height: 60px;
                  padding-left: 10px
            }
            .component{
                padding:20px
            }
        }
        
    }
   
</style>